<template>
    <el-icon :size="size" :class="{ icon: true, fixed: fixed == true }" @click="back">
        <Back v-if="index === 0" />
        <RefreshLeft v-if="index === 1" />
    </el-icon>
</template>

<script setup lang="ts">
import { Back, RefreshLeft } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const $router = useRouter()
const back = () => {
    $router.push('/home')
}
defineProps({
    size: {
        type: Number,
        default: 30
    },
    index: {
        type: Number,
        default: 0
    },
    fixed: {
        type: Boolean,
        default: false
    }
})
</script>

<style scoped>
.fixed {
    position: fixed;
    z-index: 10000;
    border-radius: 50%;
    background-color: var(--back);
    padding: 2px;
    box-shadow: 0 0 5px #000000;
    bottom: 20px;
    right: 20px;
}

.icon:hover {
    cursor: pointer;
    color: #29f;
}
</style>